<template>
    <div>
        <ChildrenView :title="title" :num="orderToday">
            <template #pic>
                <div id="five"></div>
            </template>
            <p class="p"></p>
            <template>
                <div><span>昨日订单量</span><span>{{ orderLastDay }}</span></div>
            </template>
        </ChildrenView>
    </div>
</template>
<script>
import ChildrenView from './ChildrenView.vue';
import getData from '@/mixin/mixin'
export default {
    components: { ChildrenView },
    mixins: [getData],
    data() {
        return {
            title: '累计订单量'
        }
    },
    mounted() {
       

    },
    watch:{
        orderTrend(){
            return this.gets()
        }
    },
    methods:{
        gets(){
            var myChart = this.$echarts.init(document.getElementById('five'));
            let options = {
                yAxis: {
                    show: false
                },
                xAxis: {
                    show: false,
                    type: 'category'
                },
                grid: {
                    right: 0,
                    bottom: 0,
                    left: 0,
                    top: 0
                },
                series: [
                    {
                        type: 'line',
                        data: this.orderTrend,
                        // 圆滑
                        smooth: true,
                        // 去掉原点
                        showSymbol: false,
                        // 填充颜色
                        areaStyle: {
                            color: 'purple'
                        },
                        // 去掉线
                        lineStyle: {
                            width: 0
                        },
                        //图拉长
                        stack: 'Total'
                    }

                ]
            }
            myChart.setOption(options)
        }
    }
}
</script>

<style lang="scss">
#five {
    width: 100%;
    height: 100%;
}
</style>

